<template>
  <!-- 点赞
    类名  对象  根据数据里的状态值
    点击事件  高亮  根据数据里的状态值
 -->

  <div class="like-article">
    {{ article.is_followed }}---
    <van-icon
      @click="likebtn"
      :class="{ orange: article.is_followed }"
      name="good-job"
    />
  </div>
</template>

<script>
import { likearticleApi, dellikearticleApi } from "@/api";
export default {
  props: ["article"],
  methods: {
    //点击点赞  事件
    likebtn() {
      this.article.is_followed = !this.article.is_followed;
      //如果 this.article.is_followed  = false 就表示还没有点赞
      if (this.article.is_followed) {
        this.likearticle();
      } else {
        this.dellikearticle();
      }
    },
    //文章点赞的请求
    async likearticle() {
      const res = await likearticleApi(this.article.art_id);
      console.log(res, 66666);
    },
    //取消文章点赞的请求
    async dellikearticle() {
      const res = await dellikearticleApi(this.article.art_id);
      console.log(res, 77777);
    }
  }
};
</script>
<style scoped lang="less">
.like-article {
  .orange {
    color: red;
  }
}
</style>
